﻿"use strict";

//Object wrapper to put all our functionality for the app on a object
var ticketingApp = {};

//Create an array property on ticketingApp using DOT notation
ticketingApp.ticketArray = new Array();

//C.R.U.D. - Create Read Update Delete methods
ticketingApp.readTickets = function () {
    //Start building an HTML table
    var h = '<table class="table table-bordered table-striped">';
    h += '<tr>';
    h += '<th>Description</th>';
    h += '<th>Priority</th>';
    h += '<th>Username</th>';
    h += '<th>Timestamp</th>';
    h += '<th></th>';
    h += '</tr>';

    //Sort all of the tickets in the array by the priority ascendending (1 first, 2 second, etc.)
    this.ticketArray.sort(function (a, b) {
        if (a.priority < b.priority) {
            return -1;
        } else if (a.priority > b.priority) {
            return 1;
        } else {
            return 0;
        }        
    });

    //Use a for in loop to loop through all the tickets in the array
    for (var index in this.ticketArray) {
        //Use a variable to hold a reference to the current ticket rather than have to constantly
        //type the full syntax to get to it via the array - this.ticketArray..... etc.
        var ticket = this.ticketArray[index];

        //Create the row and columns for the current ticket in the array
        h += '<tr>';
        h += '<td>' + ticket.description + '</td>';
        h += '<td>' + ticket.priority + '</td>';
        h += '<td>' + ticket.userName + '</td>';
        h += '<td>' + ticket.timestamp + '</td>';
        h += '<td><button onclick="ticketingApp.updateTicket(' + index + ')">Edit</button>';
        h += '<button onclick="ticketingApp.deleteTicket(' + index + ')">Delete</button></td>';
        h += '</tr>';
    }

    h += '</table>';

    //Add the string of HTML in the h variable to the DIV tag with Id 'result'
    document.getElementById('result').innerHTML = h;
}

ticketingApp.deleteTicket = function (index) {
    //Ask the user whether or not they're sure they want to remove the ticket
    //Only remove the ticket if they click 'ok'
    if (confirm('Are you sure you want to remove this ticket?')) {
        //Use the array splice function to remove the ticket at the given index
        this.ticketArray.splice(index, 1);

        //Call the readTickets function to rebuild our tickets table and put it on the page
        this.readTickets();
    }
}

ticketingApp.updateTicket = function (index) {
    //Find the ticket in the array using the given index
    var ticket = this.ticketArray[index];

    //Find our input text boxes in the DOM so we can get or set the values in them
    var descInput = document.getElementById('description');
    var priorityInput = document.getElementById('priority');
    var userName = document.getElementById('userName');
    var ticketIndex = document.getElementById('ticketIndex');

    //Set the values of our input textr boxes based on the ticket object obtained from the array
    descInput.value = ticket.description;
    priorityInput.value = ticket.priority;
    userName.value = ticket.userName;
    ticketIndex.value = index;
    
    //Find the create and save butrtons in the DOM
    var createButton = document.getElementById('createButton');
    var saveButton = document.getElementById('saveButton');

    //Hide the Create Button, Show the Save Button
    createButton.setAttribute('class', 'hidden');
    saveButton.removeAttribute('class', 'hidden');
}

ticketingApp.saveTicket = function () {
    //Find our input text boxes in the DOM so we can get or set the values in them
    var descInput = document.getElementById('description');
    var priorityInput = document.getElementById('priority');
    var userName = document.getElementById('userName');
    var ticketIndex = document.getElementById('ticketIndex');

    //Get our ticket object from our array by the index that is stored in the hidden input
    var ticket = this.ticketArray[ticketIndex.value];

    //Change the ticket object's property values based on what the user typed in the input boxes
    ticket.description = descInput.value;
    ticket.priority = priorityInput.value;
    ticket.userName = userName.value;

    //Show the Create Button, Hide the Save Button
    createButton.removeAttribute('class', 'hidden');
    saveButton.setAttribute('class', 'hidden');

    //Remove the text in all of the input text boxes
    descInput.value = priorityInput.value = userName.value = '';

    //Call the readTickets function to rebuild our tickets table and put it on the page
    this.readTickets();
}

//Method - Method invocation pattern
ticketingApp.createTicket = function () {
    //Find our input text boxes in the DOM so we can get or set the values in them
    var descInput = document.getElementById('description');
    var priorityInput = document.getElementById('priority');
    var userName = document.getElementById('userName');

    //Object literal notation
    //var t = {
    //    description: descInput.value,
    //    priority: priorityInput.value,
    //    userName: userName.value,
    //    timestamp: new Date()
    //};

    //Use the Object Constructor pattern to call our function.  The 'new' keyword makes this function
    //create for us a new object with the properties we want already set to the appropriate values for
    //our tickets
    var t = new this.Ticket(descInput.value, priorityInput.value, userName.value);
    //var t = this.createTicketObject(descInput.value, priorityInput.value, userName.value);

    //Add the newly created ticket to the array
    this.ticketArray.push(t);

    //Remove the text in all of the input text boxes
    descInput.value = priorityInput.value = userName.value = '';

    //Call the readTickets function to rebuild our tickets table and put it on the page
    this.readTickets();
}

//Helper function to create new tickets
//Object Constructor invocation pattern
ticketingApp.Ticket = function (description, priority, userName) {
    this.description = description;
    this.priority = priority;
    this.userName = userName;
    this.timestamp = new Date();
}

//ticketingApp.createTicketObject = function (description, priority, userName) {
//    var t = {
//        description: descInput.value,
//        priority: priorityInput.value,
//        userName: userName.value,
//        timestamp: new Date()
//    };

//    return t;
//}